<template>
  <div class="container my-5">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header text-white" style="background-color: #133068">
            <h5 class="mb-0">修改用户信息</h5>
          </div>
          <div class="card-body">
            <form @submit.prevent="handleSubmit">
              <!-- 用户名 -->
              <div class="mb-3">
                <label class="form-label">用户名</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="userForm.username"
                  disabled
                />
              </div>

              <!-- 昵称 -->
              <div class="mb-3">
                <label class="form-label">昵称</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="userForm.nickname"
                  maxlength="15"
                />
              </div>

              <!-- 修改密码开关 -->
              <div class="mb-3 form-check">
                <input
                  type="checkbox"
                  class="form-check-input"
                  v-model="showPassword"
                  id="changePassword"
                />
                <label class="form-check-label" for="changePassword"
                  >修改密码</label
                >
              </div>

              <!-- 密码 -->
              <div class="mb-3" v-if="showPassword">
                <label class="form-label">新密码</label>
                <input
                  type="password"
                  class="form-control"
                  v-model="userForm.password"
                  maxlength="32"
                />
              </div>

              <!-- 性别 -->
              <div class="mb-3">
                <label class="form-label">性别</label>
                <div class="d-flex gap-3">
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="radio"
                      value="男"
                      v-model="userForm.gender"
                    />
                    <label class="form-check-label">男</label>
                  </div>
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      type="radio"
                      value="女"
                      v-model="userForm.gender"
                    />
                    <label class="form-check-label">女</label>
                  </div>
                </div>
              </div>

              <!-- 头像上传 -->
              <div class="mb-4">
                <label class="form-label">头像</label>
                <div class="d-flex align-items-center gap-3">
                  <img
                    :src="userForm.user_pic"
                    class="avatar-preview rounded-circle"
                    alt="头像预览"
                  />
                  <input
                    type="file"
                    class="form-control"
                    accept="image/*"
                    @change="handleAvatarUpload"
                  />
                </div>
              </div>

              <button
                type="submit"
                class="btn w-100 text-white"
                style="background-color: #133068"
              >
                提交修改
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const showPassword = ref(false);

// 用户表单数据
const userForm = reactive({
  username: "当前用户名",
  nickname: "",
  password: "",
  gender: "男",
  user_pic: "default-avatar.jpg",
});

// 处理头像上传
const handleAvatarUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      userForm.user_pic = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 提交表单
const handleSubmit = async () => {
  try {
    // 这里添加提交逻辑，比如：
    // await axios.put('/api/user', userForm);
    alert("修改成功！");
  } catch (error) {
    alert("修改失败，请重试");
  }
};
</script>

<style scoped>
.avatar-preview {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.card {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>